<template>
    <view
        class="component-widget-switch"
        :style="{ fontSize: utils.rpx2px(size) + 'px', color: state ? color[1] : color[0] }"
        @click="changeState"
    >
        <text class="iconfont" :class="[state ? 'icon-kaiguan-kai' : 'icon-kaiguan-guan']"></text>
    </view>
</template>

<script>
export default {
    name: "component-widget-switch",
    data() {
        return {
            utils: this.$utils,
            state: false,
        };
    },
    props: {
        size: {
            type: Number,
            default: 34,
        },
        color: {
            type: Array,
            default: ["#c7c7c7", "#8194f2"],
        },
        open: {
            type: Boolean,
            default: false,
        },
    },
    components: {},
    created() {
        this.state = this.open;
    },
    mounted() {},
    destroyed() {},
    watch: {
        open(v) {
            this.state = v;
        },
    },
    methods: {
        changeState() {
            this.state = !this.state;
            this.$emit("input", this.state);
        },
    },
};
</script>

<style lang="less" scoped>
</style>